<template>
    <div style="width:100%">
        <div style="display:flex;justify-content:space-between;">
            <zh-select funcCode="org0022" v-bind="allAttrs"  @change="onChange"  :lazy="true" v-model="value" :searchParams="state.queryParams" placeholder="先搜索，搜索不到可新增" :fieldNames="{ label: 'orgName', value: 'orgId' }">
            </zh-select>
            <el-button v-if="props.canInsert&&!allAttrs.disabled"  type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        </div>
        <zh-dialog title="新增单位" :destroy-on-close="true" v-model="state.visible" style="width: 60%">
			<companyForm
				ref="companyFormRef"
                :areaCode="props.areaCode"
                :orgType="props.orgType"
                v-model="state.visible"
                v-model:loading="state.saveLoading"
			/>
			<template #footer>
				<span class="dialog-footer">
					<zh-button @click="state.visible = false" type="info">取消</zh-button>
					<zh-button type="primary" :loading="state.saveLoading" :disabled="state.saveLoading" @click="save"> 保存 </zh-button>
				</span>
			</template>
		</zh-dialog>
    </div>
</template>
<script lang="ts" setup>
import companyForm from './companyForm.vue';
// 引入组件需要的属性 引入表单子控件的管理类
import { itemProps, itemController } from '../lib/mapController';
const props = defineProps({
	modelValue: [String],
    ...itemProps, // 基础属性
    areaCode: {
		type: String,
		default() {
			return '';
		},
	},
    orgType: {
		type: String,
		default() {
			return '';
		},
	},
    //是否可新增
    canInsert: {
		type: Boolean,
		default() {
			return true;
		},
	},
});
let companyFormRef=ref();
const emit = defineEmits(['update:modelValue','change']);
const attrs = useAttrs();
const allAttrs = computed(() => {
	return Object.assign(props.extend, attrs, emit);
});
const state = reactive({
	mySize: allAttrs.value.size,
    queryParams:{areaCode:props.areaCode,orgType:props.orgType},
    visible:false,
    saveLoading:false,
});
const { value } = itemController(props, allAttrs.value, emit);
const add = () => {
	
	state.visible = true;
};
const onChange=(value,options)=>{
    emit('change',value,options);
}
const save=()=>{
    companyFormRef.value.save();
}
watch(
    () => props.areaCode,
    (val) => {
      state.queryParams.areaCode = val;
    }
)
watch(
    () => props.modelValue,
    (val) => {
      value.value = val;
    }
)
watch(
    () => props.orgType,
    (val) => {
      state.queryParams.orgType = val;
    }
)
</script>